<template>
  <app-view>
    <van-nav-bar left-text="孩子资料" left-arrow :border="false" @click-left="onClickLeft" />
    <scroll-view>
      <van-form input-align="right" class="children__profile">
        <van-field v-model="formData.name" readonly label="姓名" placeholder="姓名" />
        <van-field
          v-model="formData.faceImage"
          class="icon-field"
          readonly
          label="头像"
          placeholder="头像"
        >
          <template #input>
            <img
              :src="formData.faceImage"
              alt=""
              class="uploader-icon"
              @click="onImagePreview(formData.faceImage)"
            />
          </template>
        </van-field>
        <van-field v-model="formData.className" readonly label="所在班级" placeholder="所在班级" />
        <van-field v-model="formData.birthday" readonly label="出生日期" placeholder="出生日期" />
      </van-form>
    </scroll-view>
  </app-view>
</template>

<script>
  import ScrollView from '@components/scroll-view/index';
  import { ImagePreview } from 'vant';
  import { isEmpty } from '@utils/util';

  export default {
    components: { ScrollView },
    data() {
      return {
        formData: {} // 表单数据
      };
    },
    mounted() {
      this.formData = this.$route.query;
    },
    methods: {
      // 后退点击
      onClickLeft() {
        this.$router.push('./children-list');
      },
      // 图片预览
      onImagePreview(photo) {
        if (isEmpty(photo)) return false;
        ImagePreview([photo]);
      }
    }
  };
</script>

<style scoped lang="less">
  @import '~@styles/var';
  @import '~@styles/modules/visitor/van-form';
  @import '~@styles/modules/visitor/van-popup';

  .uploader-icon {
    display: block;
    width: 80px;
    height: 80px;
    overflow: hidden;
    border-radius: 8px;
    object-fit: cover;
  }

  .van-form {
    /deep/ .required-item::before {
      display: flex;
      align-items: center;
    }

    /deep/ .van-field__label {
      display: flex;
      align-items: center;
    }

    /deep/ .van-field {
      height: auto;
    }

    /deep/ .van-field__body {
      padding: 15px 0;
    }

    /deep/ .icon-field {
      height: 105px !important;
    }
  }
  .children {
    &__profile {
      background: #f7f7f7;
    }
  }
</style>
